<template>
  <div class="editTableMini">
    <table class="miniEdit" :class="bgClass">
      <colgroup>
        <col width="50px" v-if="plus" />
        <!-- :width="`${cItem?.width}px`"-->
        <col v-for="(cItem, cIndex) in newColumnsValue" :key="cIndex" :width="`${cItem?.width}px`" />
      </colgroup>
      <thead class="minThead">
        <tr>
          <td class="opration" v-if="plus"></td>
          <td v-for="(cItem, cIndex) in columnsValue" :key="cIndex">{{ cItem.title }}</td>
        </tr>
      </thead>
      <tbody class="minBody">
        <tr v-for="(dItem, dIndex) in dataValueNew" :key="dIndex">
          <!-- -->
          <td class="opration" @mouseover="hoverText = dIndex + 1" @mouseout="hoverText = ''" v-if="plus">
            <span class="oprationSpan" v-if="hoverText == dIndex + 1" @click="removeCol(dIndex)"
              ><el-icon class="del"><Remove /></el-icon
            ></span>
            <span class="oprationSpan" v-else>{{ dIndex + 1 }}</span>
          </td>
          <td v-for="(cItem, cIndex) in columnsValue" :key="cIndex">
            <slot
              :name="cItem.field"
              :scoped="{ [cItem.field]: dItem[cItem.field], index: dIndex, field: cItem.field, row: dItem }"
            >
              <div class="table_div">
                <el-input v-if="dItem[cItem.field+'_number']" v-number :validate-event="false" class="editCon" v-model="dItem[cItem.field]"></el-input>

                <el-input v-else :validate-event="false" class="editCon" v-model="dItem[cItem.field]"></el-input>
                <!-- <div class="editCon" contenteditable="true" v-html="dItem[cItem.field]?.value || dItem[cItem.field]"></div> -->
                <span class="errorTip" v-if="dItem[cItem.field+'_errInfo']">{{dItem[cItem.field+'_errInfo']}}</span>
              </div>
            </slot>
          </td>
        </tr>

        <tr v-if="plus">
          <td class="opration plus" :colspan="colCount" >
            <el-icon @click="plusCol"><CirclePlus /></el-icon>
          </td>
        </tr>
      </tbody>
    </table>

    <div class="disable_shadow" v-if="disabled"></div>
  </div>
</template>
<script lang="ts" setup>
import { cos } from "mathjs";
import { computed, ref, watch } from "vue";
const props = withDefaults(
  defineProps<{
    disabled?:boolean;//是否禁用
    plus?: boolean; //是否有新增
    columnsValue?: any; //头部数据
    dataValue: any; //表格数据
    bgClass?: string; //表格有颜色class ="bgColorTable"
  }>(),
  {
    disabled:false,
    plus: true,
    columnsValue: [],
    dataValue: []
  }
);
console.log(props);

// const newColumnsValue=computed(()=>{

//     return props.columnsValue;
// })
const newColumnsValue = ref(props.columnsValue);
const getBLen = function(str) {
  if (str == null) return 0;
  if (typeof str != "string"){
    str += "";
  }
  return str.replace(/[^\x00-\xff]/g,"01").length;
}
watch(
  () => props.columnsValue,
  (newValue, oldValue) => {
    if (newValue && newValue.length) {
      let colWidth = document.querySelector(".nooption")?.scrollWidth;
    
      let width = Math.ceil(colWidth / newValue.length);
      newColumnsValue.value=newValue.map(newItem => {
       
        return {
          ...newItem,
          width:getBLen(newItem.title)*14<100?100:getBLen(newItem.title)*14//newItem.width?newItem.width:(newValue.length<5?getBLen(newItem.title)*14:(width > 200 ? width : 250))
        };
      });
 
    }
  },{deep:true,immediate:true}
);

// console.log(newColumnsValue)
//合并总数
const colCount = computed(() => {
  let allLen = props.columnsValue.length;
  return props.plus ? allLen + 1 : allLen;
});

const dataValueNew = computed(() => {
  console.log(props.dataValue);
  return props.dataValue;
});
//鼠标浮动改变
const hoverText = ref("");

// emit
const emit = defineEmits<{
  delOne: [value: any]; //全选与反选
  plusCol: [];
}>();
//添加一行
const plusCol = () => {
  //     let paramsObj={};
  //      props.columnsValue.map(citem=>{
  //         paramsObj[citem.filed]="";
  //      })

  //  dataValueNew.value.push(paramsObj)

  emit("plusCol");
};
//删除一行
const removeCol = dIndex => {
  // dataValueNew.value.splice(dIndex,1);
  emit("delOne", dIndex);
};

defineExpose({});
</script>
<style lang="scss" scoped>
@import url("./index.scss");
</style>
